<template>
    <div class="bottom_bar">
        <router-link :to="item.href" class="bottom_list" active-class="active" v-for="(item,index) in bottomData" :key="index">
            <i class="iconfont" :class=" item.icon "></i>
            <div class="name">{{item.name}}</div>
        </router-link>
    </div>
</template>

<script>
export default {
    data() {
        return {
            bottomData: [
                {
                    icon: 'icon-v1',
                    name: '首页',
                    href: 'home'
                }, {
                    icon: 'icon-dingwei1',
                    name: '附近',
                    href: 'nearby'
                }, {
                    icon: 'icon-xiaoxi',
                    name: '动态',
                    href: 'dynamic'
                }, {
                    icon: 'icon-faxian',
                    name: '发现',
                    href: 'find'
                }, {
                    icon: 'icon-gerenxinxi',
                    name: '我的',
                    href: 'user'
                },
            ]
        }

    },
    components: {

    }
}
</script>

<style>
.bottom_bar {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: 999;
    background: #fff;
    border-top: 1px solid #515c71;
    padding: 5px 0;
    font-family: "微软雅黑", Arial, Tahoma;
}

.bottom_list {
    float: left;
    width: 20%;
}

.bottom_list i {
    display: block;
    font-size: 20px;
    margin-bottom: 5px;
}
.bottom_list.active i,.bottom_list.active .name{
    /*color:#F4A41E;*/
    color:red;
}
</style>
